<template>
  <view class="container">
    <view class="title">更新记录</view>
    <scroll-view scroll-y class="log-scroll">
      <view class="log-content">
        <view v-for="(item, idx) in visibleChangelog" :key="idx" :class="['log-item', item.type]">
          <view class="log-version">{{item.version}} <text class="log-date">({{item.date}})</text></view>
          <view class="log-desc">
            <view v-for="(line, lidx) in parseContent(item.content, item.type)" :key="lidx" :class="['log-line', item.type]">
              <text v-if="line.type==='tag'" :class="['log-tag', line.tag]">{{line.tagText}}</text>
              <text :class="['log-text', {'log-highlight': line.highlight}]">{{line.text}}</text>
            </view>
          </view>
        </view>
        <view v-if="changelog.length > 3" class="log-toggle" @click="toggleShowAll">
          <text>{{showAll ? '收起' : '查看更多'}}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      changelog: [
        {
          version: 'v1.0.0',
          date: '2024-05-05',
          content: `新增: 支持本地收支记录、分类管理、统计分析、图片上传等功能。\n优化: UI体验，支持多端适配。\n修复: 修复部分已知bug。`,
          type: 'add'
        },
        {
          version: 'v0.9.0',
          date: '2024-04-28',
          content: `新增: 分类自定义功能。\n优化: 统计图表展示。`,
          type: 'add'
        },
        {
          version: 'v0.8.0',
          date: '2024-04-20',
          content: `新增: 预算设置。\n修复: 修复图片上传异常。`,
          type: 'fix'
        },
        {
          version: 'v0.7.0',
          date: '2024-04-10',
          content: `优化: 交互体验。`,
          type: 'opt'
        }
      ],
      showAll: false
    }
  },
  computed: {
    visibleChangelog() {
      return this.showAll ? this.changelog : this.changelog.slice(0, 3)
    }
  },
  methods: {
    toggleShowAll() {
      this.showAll = !this.showAll
    },
    // 解析每条内容，支持标签和高亮
    parseContent(content, type) {
      // 支持多行，每行可有"新增:""修复:""优化:"等标签，优先用item.type
      if (!content) return []
      return content.split(/\n|\n/).filter(Boolean).map(line => {
        let tag = '', tagText = '', highlight = false
        let text = line.trim()
        if (text.startsWith('新增:')) {
          tag = 'add'; tagText = '新增'; text = text.replace('新增:', '').trim(); highlight = true
        } else if (text.startsWith('修复:')) {
          tag = 'fix'; tagText = '修复'; text = text.replace('修复:', '').trim(); highlight = true
        } else if (text.startsWith('优化:')) {
          tag = 'opt'; tagText = '优化'; text = text.replace('优化:', '').trim(); highlight = false
        } else if (type) {
          tag = type; tagText = '';
        }
        return {
          type: tag ? 'tag' : '',
          tag,
          tagText,
          text,
          highlight
        }
      })
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background: #f8f8f8;
  min-height: 100vh;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}
.log-scroll {
  max-height: 80vh;
}
.log-content {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.06);
}
.log-item + .log-item {
  margin-top: 40rpx;
  border-top: 1rpx solid #eee;
  padding-top: 30rpx;
}
.log-version {
  font-size: 30rpx;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 10rpx;
}
.log-date {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}
.log-desc {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}
.log-line {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8rpx;
}
.log-tag {
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 12rpx;
  padding: 2rpx 12rpx;
  border-radius: 8rpx;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2rpx;
}
.log-tag.add {
  background: #4cd964;
}
.log-tag.fix {
  background: #ff3b30;
}
.log-tag.opt {
  background: #007aff;
}
.log-text {
  flex: 1;
  word-break: break-all;
  white-space: pre-line;
  min-width: 0;
}
.log-highlight {
  color: #d2691e;
  font-weight: bold;
}
.log-toggle {
  text-align: center;
  color: #007aff;
  font-size: 28rpx;
  margin-top: 30rpx;
  cursor: pointer;
}
</style> 